<template>
	<!-- 签到 -->
	<view class="content">
		<view class="header">
			<view class="header_box">
				<navigator class="kms" hover-class="none" url="./qianlog">
					详细记录
				</navigator>
				<view class="header_box_left">
					<view class="header_box_left_tit">
						当月连续签到
					</view>
					<view class="header_box_left_text">
						{{lianday}}天
					</view>
				</view>
				<view class="header_box_cen">
					<image src="http://thirdwx.qlogo.cn/mmopen/9kibjKzqKf8H12BxOk7T3UeBIfichjsb0noOibrn3741aZumfU1TvN7bbO7rr81sLguKmb4grCj3vL5hafzECGHmS7YMNDNQp0f/132" class="tou" mode="widthFix"></image>
					<view class="name">白芷</view>
					<view class="zhi">潮人值:{{chaozhi}}</view>
					<view class="btn_box">
						<view class="btn">
							点击签到
						</view>
					</view>
				</view>
				<view class="header_box_left">
					<view class="header_box_left_tit">
						当月总签到
					</view>
					<view class="header_box_left_text">
						{{zongday}}天
					</view>
				</view>
			</view>
		</view>
		
		<navigator style="display: flex;justify-content: space-around;" url="" hover-class="none">
		<image src="http://wx.crh2009.com/attachment/images/2/2019/12/four.png" class="yue_img" mode="widthFix"></image>
		</navigator>
		
		
		<view class="kl">
			提示：点击漏签日期可补签哦～
		</view>
		<view class="ik">
			<view class="ik_left">
				连续签到有礼
			</view>
			<view class="ik_left">
				连续签到即可领取
			</view>
		</view>
		
				<view class="kjms">
					<!-- 潮人值 -->
							<view class="gh_ul">
								<view class="gh_ul_li" v-for="(chao,index) in chao">
									<view class="gh_tit">+{{chao}}</view>
									<view class="gh_span">潮人值</view>
								</view>
							</view>
							<!--////////////////-->
							<template v-if="changeling">
							    <view class="jko">
							    	<view class="jko_ul">
							    		<!-- 是否领取 jko_ul_span_yuan领取状态-->
							    			<view v-for="(ling,index) in ling" :key="index">
							    				<text :class="ling ? 'jko_ul_span_yuan jko_ul_span' :'jko_ul_span' "></text>
							    			</view>
							    	</view>
							    </view>
							</template>
							<!--///////////////-->
								<view class="gh_ul gh_ul2">
								<view class="gh_ul_li" v-for="(day,index) in day" :key="index" style="height:30rpx;margin-bottom:20rpx;">
									<view class="gh_tit">{{day}}天</view>
									</view>
									</view>
									
									<view class="gh_ul gh_ul2" style="justify-content: space-between;">
									<view class="gh_span clickgh_span" @tap="lingqu(index)" v-if="showling" v-for="(lingtext,index) in lingtext">{{lingtext}}</view>
									<view class="gh_span clickgh_span" style="background-color: #ccc;border:none" v-else v-for="(oldlingtext,index) in oldlingtext">已领取</view>
								</view>
								
							
							</view>
		
		<view class="ik">
			<view class="ik_left">
				温馨提示：超过48小时未签到，无法显示佣金！
			</view>
		</view>
		

		<!-- 侧边栏 -->
		<fixce></fixce> 
		<!-- 回到顶部start -->
		<view class="top" :style="{'display':(topState===true? 'block':'none')}">
		<image src="../../static/huitop.png" class="huitop"
		@tap="top()">
		</view>
		</image>
			<!-- 回到顶部end-->
	</view>
</template>

<script>
	import fixce from '../../component/fixce.vue';  //侧边栏组件
	export default{
		components:{
		fixce
		},
		data(){
			return{
				lianday:7,  //连续签到
				zongday:1,  //总签到
				topState:false,
				chaozhi:442,//目前潮人值
				chao:[10,20,30,40,50], //奖励潮人值
				ling:[true,false,false,false,false],   //是否领取,true已经领取
				day:[7,15,20,25,30],  //天
				lingtext:['已领取','领取','领取','领取','领取'],
				oldlingtext:['已领取','已领取','已领取','已领取','已领取'],
				changeling:true,
				showling:true,   //领取状态
			}
		},
		// 回到顶部start
		onPageScroll(e){ //根据距离顶部距离是否显示回到顶部按钮
		    if(e.scrollTop>200){ //当距离大于200时显示回到顶部按钮
		        this.topState = true
		    }else{ //当距离小于200时关闭回到顶部按钮
		        this.topState = false
		    }
		},
		// 回到顶部end
		onLoad (){
		
		},
		methods:{
			top() { //回到顶部
			　　　　uni.pageScrollTo({ 
			　　　　　　scrollTop: 0, duration: 300 
			　　　　}); 
			　　},
			lingqu(index){
				if(this.lianday<this.day[index]){  //判断连续签到天数是否达标
					uni.showToast({
						title:'请保持连续签到',
						icon:'none'
					});
				}
				if(this.lianday>=this.day[index]){  //判断连续签到天数是否达标
					// 解决view视图不实时刷新的问题
					   this.changeling=false;
					   setTimeout(()=>{
						   this.changeling=true;
					   },0)
					this.chaozhi+=this.chao[index];  //加当前达标的潮人值
					this.ling[index]=true;  //选中的勾样式
					this.lingtext[index]=this.oldlingtext[index];  //更改index个的状态文字
					uni.showToast({
						title:'已领取',
						icon:'none',
						position:'bottom'
					})
				}
		
			}
		}
	}
</script>

<style>
	.content{
		width:100%;
		height:100vh;
		background: #f3f3f3;
	}
	.header{
		width:100%;
		padding:20rpx 0;
		display: flex;
		justify-content: space-around;
		background: #ff80c0;
	}
	.header_box{
		width:95%;
		margin:0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height:350rpx;
		position: relative;
	}
	.kms{
		    font-size: 22rpx;
		    white-space: nowrap;
		    color: #fff;
		    padding: 6rpx 15rpx;
		    background: rgb(255,153,205);
		    border-radius: 50rpx;
		    position: absolute;
		    top: 10rpx;
		    right: 10rpx;
	}
	.header_box_left,.header_box_cen{
		width:33%;
		display: flex;
		flex-wrap:wrap;
		justify-content: space-around;
		align-items: center;
		font-size:28rpx;
	}
	.header_box_left_tit{
		width:100%;
		text-align: center;
		color:#fff;
			}
	.header_box_left_text{
		color: rgb(254,243,31);
		font-size:30rpx;
		margin-top:10rpx;
	}
	.tou{
		width:130rpx;
		border-radius: 100rpx;
		margin-bottom:5rpx;
	}
	.name,.zhi{
		width:100%;
		text-align: center;
		color:#fff;
		margin-top:8rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size:26rpx;
	}
	.name{
		font-size:30rpx;
	}
	.btn_box{
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top:10rpx;
	}
	.btn{
		width:160rpx;
		border-radius: 100rpx;
		padding:8rpx 0;
		border:1rpx solid #fff;
		white-space: nowrap;
		color:#fff;
		text-align: center;
	}
	.yue_img{
		width:90%;
		margin:25rpx auto;
	}
	.kl{
		width:90%;
		margin:20rpx auto;
	}
	.ik{
		width:90%;
		margin:0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #a2a2a2;
	}
	
	
	
	.kjms{
		width:90%;
		margin:20rpx auto 50rpx;
	}
		.gh_ul{
			width:100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
		.jko_ul{
				width:100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
		.jko_ul view{
			width:18%;
			height:80rpx;
			display: flex;
			flex-wrap:wrap;
			justify-content: space-around;
			align-items: center;
			 margin-left: 40rpx;
		}   
		.jko_ul view:nth-child(1){
			margin-left:0;
		}
		.jko_ul_span{
		display: block;
	    width: 44rpx;
	    height: 44rpx;
	    background: #fff;
	    border-radius: 100rpx;
	    margin-top: -70rpx;
		}
		.jko_ul_span_yuan{
		display: block;
	    width: 44rpx;
	    height: 44rpx;
	    background: #fff;
	    border-radius: 100rpx;
	    margin-top: -70rpx;
		}
		.jko_ul_span_yuan::after{
		content: "✓";
	    color: #ff80c0;
	    font-size: 30rpx;
	    margin-left: 10rpx;
		}
		.gh_ul2 view{
			background: none;
		}
		.gh_ul2 .gh_span{
	    padding: 8rpx 0;
	    margin-top: 0px;
	    color:#fff;
	    background: #ff80c0;
	        border: 2rpx solid #ff80c0;
		}
		.clickgh_span{
		width:90%;
		text-align: center;
		}
		.gh_ul_li{
			width:18%;
			height:80rpx;
			background: #fff;
			display: flex;
			flex-wrap:wrap;
			justify-content: space-around;
			align-items: center;
			text-align: center;
			margin-left:40rpx;
			 color: #777;
			 font-size: 26rpx;
		}
		.clickgh_span{
			width:15%!important;
		}
		.gh_ul_li:nth-child(1){
			margin-left:0;
		}
		.gh_tit{
			width:100%;
			    margin-top: 8rpx;
		}
		.gh_span{
			width:100%;
			    margin-top: -14rpx;
		}
	
		.jko{
			width:100%;
			height:14rpx;
			background: #fff;
		    margin: 26rpx 0 12rpx;
		}
		
</style>
